{% extends "base.html" %}
{% block page_title %}Sign Up{% endblock %}

{% block content %}
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <div class="card">
      <div class="cardface">
        <h2>Sign Up</h2>
        <p>Already have an account? Then please <a href="{{ login_url }}">sign in</a>.</p>
        {% if form.non_field_errors %}
          <div class="bg-danger alert">
            {% for err in form.non_field_errors %}
              <p class="form-error">{{ err }}</p>
            {% endfor %}
          </div>
        {% endif %}
        <form role="form" method="post" action=".">
          {% csrf_token %}
          <div class="form-group">
            <label class="control-label" for="{{ form.username.id_for_label }}">{{ form.username.label }}</label>
            <input class="form-control" id="{{ form.username.id_for_label }}" maxlength="30" name="{{ form.username.html_name }}" type="text" placeholder="{{ form.username.label }}" />
            {{ form.username.errors }}
          </div>
          <div class="form-group">
            <label class="control-label" for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
            <input class="form-control" id="{{ form.email.id_for_label }}" maxlength="30" name="{{ form.email.html_name }}" type="email" placeholder="{{ form.email.label }}" />
            {{ form.email.errors }}
          </div>
          <div class="form-group">
            <label class="control-label" for="{{ form.password1.id_for_label }}">{{ form.password1.label }}</label>
            <input class="form-control" id="{{ form.password1.id_for_label }}" maxlength="30" name="{{ form.password1.html_name }}" type="password" placeholder="{{ form.password1.label }}"/>
            {{ form.password1.errors }}
          </div>
          <div class="form-group">
            <label class="control-label" for="{{ form.password2.id_for_label }}">{{ form.password2.label }}</label>
            <input class="form-control" id="{{ form.password2.id_for_label }}" maxlength="30" name="{{ form.password2.html_name }}" type="password" placeholder="{{ form.password2.label }}"/>
            {{ form.password2.errors }}
          </div>
          <div class="form-group">
            <button class="btn btn-primary" type="submit">Sign In</button>
            <input type="hidden" name="next" value="{{ next }}" />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}
